let id = 0
// 找到按钮元素
let btn = document.querySelector('.btn')
// 给按钮绑定点击事件
btn.onclick = fn

function start() {
  // 如果上一个定时器存在就清空定时器
  if (id) {
    clearInterval(id)
  }
  let i = 10
  let box = document.querySelector('.box')
  // 创建一个定时器对象，多次点击按钮时会创建多个定时器对象，每个定时器对象都会对box进行操作
  // a定时器要写入值8，b定时器要写入的值9，c定时器写入的值10，造成数据输出紊乱
  // 解决方案：在任意时刻有且只有一个定时器对box进行操作即可
  // 在创建b定时器时，清空a定时器，在创建c定时器时，清空bd定时器...
  // 在创建定时器时清空前一个定时器
  id = setInterval(function () {
    box.innerHTML = i
    if (i === 1) {
      clearInterval(id)
      i = 10
      console.log('定时器清空')
    }
    i--
  }, 1000)
}

// button按钮的事件回调函数
function fn() {
  if (id) {
    clearInterval(id)
  }
  let i = 10
  let box = document.querySelector('.box')
  id = setInterval(() => {
    box.innerHTML = i
    btn.innerHTML = '倒计时' + i + 's'
    // 禁用button
    btn.disabled = true
    if (i === 1) {
      clearInterval(id)
      i = 10
      btn.innerHTML = '开始'
      // 解除禁用button
      btn.disabled = false
    }
    i--
  }, 1000)
}

// 到5-1还有多长时间
function getTime() {
  let dateNowTime = new Date().getTime()
  let date51Time = new Date('2023-05-01 08:00:00').getTime()
  let times = date51Time - dateNowTime // 现在到5.1的毫秒数
  // 一天的毫秒数
  let dayTime = 86400 * 1000
  let days = Math.floor(times / dayTime)
  // 一个小时的毫秒数
  let hoursTime = 3600 * 1000
  let hours = Math.floor((times % dayTime) / hoursTime)
  // 一分钟的毫秒数
  let minTimes = 60 * 1000
  let mins = Math.floor((times % hoursTime) / minTimes)
  let secs = Math.floor((times % minTimes) / 1000)
  return days + '天 ' + hours + ':' + mins + ':' + secs
}
let timer = 0
if (timer) {
  clearInterval(timer)
}
timer = setInterval(() => {
  let rt = getTime()
  document.getElementsByClassName('times')[0].innerHTML = rt
}, 1000)
